<!DOCTYPE html>
<html>
	<head>
		<title>Paginated Drop Down</title>
		<script type="text/javascript" src="../js-lib/jquery/core/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="plugin/paginated-drop-down-plugin.js"></script>
		<!-- Using Component Reposition Plugin along with Search Drop Down Plugin. -->
		<script type="text/javascript" src="../ComponentReposition/plugin/component-reposition-plugin.js"></script>
		<!-- Using Filter Json Plugin along with Search Drop Down Plugin to simulate an Ajax call. -->
		<script type="text/javascript" src="../FilterJson/plugin/filter-json-plugin.js"></script>
		<!-- Using JS Template Plugin with this Plugin -->
		<script type="text/javascript" src="../JSTemplate/plugin/js-template-plugin.js"></script>
		
		<script type="text/javascript" src="../resources/data.js"></script>
		
		<link rel="stylesheet" type="text/css" href="style/paginated-drop-down-style.css" />
	</head>
	
	<body>
		<div id="input-container"><input type="text" id="search-term" name="searchTerm" value=""/></div>
	</body>
	
	<script type="text/javascript">
		$( document ).ready(function() {
			var config = {
				inputSelector: '#search-term', // mandatory - selector of input element.
				inputContainerSelector: '#input-container', // mandatory - selector of the container of the input element.
				itemsPerPage: 10,
				template: '<div class="dropdown-container-item"><div class="item-row" title="{@:title}">{@:title}</div></div>'
			};
			
			$( '#search-term' ).keyup(function() {
				var config = {
						json: data,
						property: 'title',
						value: $.trim( this.value ),
						checkContains: true,
						wrapper: true
					},
					filteredData = ($.trim( this.value )) ? filterJson( config ) : [],
					pageItems = [];

				/* $( filteredData ).each(function(key) {
					var itemContent = '<div class="search-dropdown-item">';
						itemContent += '<div class="item-row" title="' + filteredData[key]['title'] + '">' + filteredData[key]['title'] + '</div>';
						itemContent += '</div>';
					
					pageItems.push(itemContent);
				});
				
				dropdown_plugin.constructDropDown( pageItems ); */
				
				dropdown_plugin.constructDropDown( filteredData, true );
			});
			
			dropdown_plugin.initialize( config );
		});
	</script>
</html>
